<template>
    <div class="biological-warn container-bottom-20">
        <CardBox title="告警信息"></CardBox>
        <div class="content-container content-container-height-262">
            <el-table
                :data="tableData"
                :height="257"
                stripe
                @row-click="handleRowClick"
                style="width: 100%">
                <el-table-column
                prop="deviceName"
                label="设备名称"
                width="150"
                show-overflow-tooltip>
                <template #default="scope">
                    <span class="ellipsis">{{ scope.row.deviceName }}</span>
                </template>
                </el-table-column>
                <el-table-column
                prop="alarmContent"
                label="告警信息"
                width="150">
                </el-table-column>
                <el-table-column
                prop="alarmTime"
                label="告警时间">
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>
<script>
import CardBox from '@/components/Global/CardBox.vue'
import {EventBus} from "../../utils/event-bus";
let that;
export default {
    components: {
        CardBox
    },
    data() {
        return {
            timer:null,
            tableData: [],
            type:'kongqi'
        }
    },
    methods: {
        handleRowClick(row, column, cell, event) {
   
        }
    },
    created() {
        that=this;
        EventBus.$on('set-biological-device-type', (message) => {
            this.type = message;
            this.$api.environment.getAlarmList(this.type,'',10).then(res => {
                this.tableData = res
            });
        })
    },
    mounted() {

    },
    beforeDestroy() {
        if (this.timer !== null) {
            clearInterval(this.timer);
            this.timer = null; // 确保定时器引用被清除，防止内存泄漏
        }
    }
}
</script>
<style scoped lang="scss">
.biological-warn{
    :deep(.el-table) {
    background: transparent;
    font-size: 14px;
    
    &::before {
      display: none;
    }
    
    tr {
      background: transparent;
      height: 28px;
    }

    .el-table__body {
      tr {
        &.el-table__row--striped td {
          background: rgba(65, 123, 214, 0.19);
        }
        &:hover{
          td {
            color: #07FFE5 !important;
            background: rgba(65, 123, 214, 0.19) !important;
          }
        }
      }
    }
    
    th.el-table__cell {
      background: rgba(65, 123, 214, 0.19) !important;
      border-bottom: 1px solid rgba(0, 150, 255, 0.3);
      color: #fff !important;
      font-weight: 500;
      padding: 4px 10px;
      height: 28px;
      line-height: 20px;
      
      &.is-leaf {
        border-bottom: 1px solid rgba(0, 150, 255, 0.3);
      }

      &:hover {
        background: rgba(65, 123, 214, 0.19) !important;
        color: #fff !important;
      }
    }
    
    td.el-table__cell {
      background: transparent;
      border-bottom: 1px solid rgba(0, 150, 255, 0.3);
      color: #fff;
      padding: 4px 10px;
      height: 28px;
      line-height: 20px;
      cursor: pointer;
      &:last-child{
        font-family: DIN Pro;
      }
    }

    .el-table__body tr.hover-row > td.el-table__cell {
      background: rgba(65, 123, 214, 0.19);
    }

    .el-table__body tr:hover > td.el-table__cell {
      background: rgba(65, 123, 214, 0.19);
    }

    .el-table__body-wrapper {
      overflow-x: hidden;
    }
  }
}
</style>

